<template>
    <div id="Personal">
        <div class="header">
            <img class="return_img" src="@/assets/Return2.png" style="width:.23rem;height:.4rem;" v-on:click="back()">
            个人绩效
        </div>
        <div class="personal">
            <popup-picker  :data="[List_time]" v-model="value">
                <template slot="title" slot-scope="props">
               <img class="img" src="@/assets/calendar.png" alt="">
                </template> 
            </popup-picker>
            <div class="personal_box" v-if="listData.type == 1">
                <!-- 拉新量 -->
                <div class="personal_conten">
                    <box class="personal_conten_top">
                        <p>拉新量</p>
                        <p class="tis" v-on:click="showToast"></p>
                        <p class="percentage">完成 &nbsp<span>{{ percent2 }}%</span></p>             
                    </box>
                    <div style="clear:both"></div>
                    <box>
                        <x-progress :percent="progress2" :show-cancel="false"></x-progress>
                    </box>
                    <div class="Personal_conten_table">
                        <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
                            <thead>
                                <tr>
                                    <th>目标</th>
                                    <th>已拉新</th>
                                    <th v-if="listData.doneNumber>listData.targetNumber">超出拉新</th>
                                    <th v-else>剩余拉新</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ listData.targetNumber }}位</td> 
                                    <td>{{ listData.doneNumber }}位</td>
                                     <td v-if="listData.doneNumber>listData.targetNumber">{{(listData.targetNumber-listData.doneNumber).toString().substr(1)}}位</td> 
                                    <td v-else>{{listData.targetNumber-listData.doneNumber}}位</td>                          
                                </tr>                     
                            </tbody>
                        </x-table>
                    </div>           
                </div>

                <!-- 订单额  订单数-->
                <div class="personal_conten">
                    <box class="personal_conten_top">
                        <p v-if="listData.orderType ==1">订单数</p>
                        <p v-if="listData.orderType ==2">订单额</p>
                        <p class="tis" v-on:click="showToast2"></p>
                        <p class="percentage  e333" v-if="listData.orderType ==1">完成 &nbsp<span>{{ percent33 }}%</span></p>
                        <p class="percentage" v-if="listData.orderType ==2">完成 &nbsp<span>{{ percent3 }}%</span></p>              
                    </box>
                    <div style="clear:both"></div>
                    <box v-if="listData.orderType ==1">
                        <x-progress :percent="orderType1" :show-cancel="false"></x-progress>
                    </box>
                     <box v-if="listData.orderType ==2">
                        <x-progress :percent="orderType2" :show-cancel="false"></x-progress>
                    </box>
                    <div class="Personal_conten_table">
                        <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
                            <thead>
                               
                                <tr>
                                    <th>目标</th>
                                    <th v-if="listData.orderType ==1">已产生</th>
                                    <th v-if="listData.orderType ==2">已产生</th>
                                    <th v-if="listData.orderType ==2 && listData.doneAmount>listData.targetAmount">超出</th>
                                    <th v-if="listData.orderType ==2 && listData.doneAmount<listData.targetAmount">剩余</th>

                                    <th v-if="listData.orderType ==1 && listData.doneOrderNumber>listData.orderNumber">超出</th>
                                    <th v-if="listData.orderType ==1 && listData.doneOrderNumber==listData.orderNumber">已完成</th>
                                    <th v-if="listData.orderType ==1 && listData.doneOrderNumber<listData.orderNumber">剩余</th>
                                </tr>
                            </thead>
                            <tbody>
                                 <tr>
                                    <td  v-if="listData.orderType ==1">{{ listData.orderNumber }}</td> 
                                    <td  v-if="listData.orderType ==2">￥{{ listData.targetAmount  }}</td> 

                                    <td v-if="listData.orderType ==1">{{ listData. doneOrderNumber}}</td>
                                    <td v-if="listData.orderType ==2">￥{{ Math.floor(listData.doneAmount*100)/100 }}</td>
                                   
                                    <td v-if="listData.orderType ==1">
                                      {{ listData.doneOrderNumber>listData.orderNumber?(listData.orderNumber - listData.doneOrderNumber).toString().substr(1):
                                      listData.doneOrderNumber==listData.orderNumber?listData.orderNumber:
                                        listData.orderNumber - listData.doneOrderNumber
                                       }}
                                    </td>                     
                                    <td v-if="listData.orderType ==2">
                                        ￥{{ listData.doneAmount>listData.targetAmount?                                
                                        (Math.floor((listData.targetAmount - listData.doneAmount)*100) / 100).toString().substr(1):
                                        Math.floor((listData.targetAmount - listData.doneAmount)*100) / 100
                                      }}
                                    </td>
                                </tr>                               
                            </tbody>
                        </x-table>
                    </div>           
                </div>
                <!-- 已获得奖励 -->
                <div class="personal_conten personal_conten_last">
                    <box class="personal_conten_top">
                        <p>已获得奖励 ￥{{ Math.floor( total*100) /100 }}元</p> 
                        <p class="detailed color3" @click="see_details">查看明细</p>        
                    </box>
                    <div class="Personal_conten_table">
                        <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;position:unset">
                            <thead>
                                 <tr style="line-height:20px;">
                                    <th>
                                        <span>拉新量奖励</span>    
                                        <p v-if="listData.doneNumber>=listData.targetNumber">￥{{listData.doneNumber*listData.completeMember}}元</p> 
                                        <p v-else>￥{{listData.doneNumber*listData.unfinishedMember}}</p>                                                         
                                    </th>
                                    <th>
                                        <span>订单奖励</span>
                                        <p v-if="listData.orderType ==1">                             
                                            ￥{{ listData.doneOrderNumber>listData.orderNumber?listData.doneOrderNumber*listData.orderMember:
                                            listData.doneOrderNumber==listData.orderNumber?listData.doneOrderNumber*listData.orderMember:0}}                               
                                        </p>
                                        <p v-if="listData.orderType ==2">
                                            {{listData.doneAmount>listData.targetAmount?'￥'+ (Math.floor(listData.doneAmount * listData.orderMember)*100)/100:'￥'+0}} 
                                        </p>
                                    </th>
                                </tr>
                            </thead>               
                        </x-table>
                    </div>           
                </div>
            </div>
            <div class="personal_box" v-if="listData.type == 2">
                <div class="personal_conten2">
                    <div class="Personal_conten_table">
                        <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
                            <thead>
                                <tr>
                                    <th>已拉新</th>
                                    <th v-if="listData.orderType == 1">已完成订单数</th>
                                    <th v-if="listData.orderType == 2">已完成订单额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ listData.doneNumber  }}</td> 
                                    <td v-if="listData.orderType == 1">{{ listData.doneOrderNumber }}</td>
                                    <td v-if="listData.orderType == 2">{{ listData.doneAmount }}</td>                             
                                </tr>                     
                            </tbody>
                        </x-table>
                    </div>
                </div>
                <div class="personal_bottom">
                    <p class="color3" @click="see_details">查看明细</p>
                    <span style="width:100%;text-align:left;">您尚未参与考核,暂无奖金;<br>如想参与,请联系部门负责人;</span>
                </div>
            </div>
            <x-button type="primary" style="margin-top:50px" @click.native="onItemClick">立即推荐</x-button> 
             <!-- 提示分享 -->
            <div v-transfer-dom>
              <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
                <div style="color:#fff;text-align:center;height:100%;" @click="showDialogStyle = false">
                  <div class="content">
                      <p  class="tishi"><img src="@/assets/tishi.png" alt="" style="width:3rem"></p>
                      <p style="font-size:.48rem">请点击右上角分享</p>
                  </div>
                </div>
              </x-dialog>
            </div>
            <!-- 拉新奖励 -->
            <div v-transfer-dom>
              <x-dialog v-model="ishowToast" class="dialog-demo">
                <div style="padding:.3rem">                 
                  <h3>拉新奖励说明</h3>
                  <p>目标未完成,每位奖励{{ listData.unfinishedMember }}元;<br> 完成奖励后,每位奖励{{ listData.completeMember }}元;</p>
                </div>
                <div @click="ishowToast=false"  style="padding:.3rem">
                  <span class="vux-close"><img src="@/assets/close2.png" style="width:.28rem"></span>
                </div>
              </x-dialog>
            </div>
            <!-- 订单奖励 -->
            <div v-transfer-dom>
              <x-dialog v-model="ishowToast2" class="dialog-demo">
                <div style="padding:.3rem">                 
                  <h3>订单奖励说明</h3>
                
                  <p v-if="listData.orderType == 2">目标未完成,无奖励;<br> 完成目标,奖励订单额的{{ (listData.orderMember)*100  }}%;</p>
                  <p v-if="listData.orderType == 1">目标未完成,无奖励;<br> 完成目标,每单奖励{{ listData.orderMember  }}元;</p>
                </div>
                <div @click="ishowToast2=false"  style="padding:.3rem">
                  <span class="vux-close"><img src="@/assets/close2.png" style="width:.28rem"></span>
                </div>
              </x-dialog>
            </div>
        </div>              
    </div>
</template>
<script>
import {
  XHeader,
  XProgress,
  Box,
  XTable,
  XButton,
  PopupPicker,
  Toast,
  XDialog,
  TransferDomDirective as TransferDom
} from "vux";
import {
  getAchievements,
  getTargetList,
  getPersonalInfo
} from "@/service/home.js";
import AxiosIns from "@/service/axiosConfig.js";
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    XProgress,
    Box,
    XTable,
    XButton,
    PopupPicker,
    Toast,
    XDialog
  },
  data() {
    return {
      userInfo: "",
      id: "",
      targetList: "",
      List_time: [],
      value: ["1"],
      targetId: "",
      last_startTime: "",
      ishowToast: false,
      ishowToast2: false,
      listData: "",
      showDialogStyle: false,
      progress2: "",
      orderType1: "", //订单数进度条
      orderType2: "", //订单额进度条
      token: "",
      name: "",
      android: true //区分安卓入口字段
    };
  },
  watch: {
    value(newName, oldName) {
      this.value.join(",");
      var str = this.value[0];
      this.targetList.forEach(item => {
        var att = item.startTime + "至" + item.endTime;
        if (att == str) {
          this.targetId = item.targetId;
          localStorage.setItem("targetId", this.targetId);
        }
      });
      if (newName) {
        this._getAchievements();
      }
    }
  },
  computed: {
    //完成拉新量百分比
    percent2: function() {
      if (this.listData.targetNumber == 0) {
        return 0;
      }
      return (
        Math.floor(
          (this.listData.doneNumber / this.listData.targetNumber) * 100 * 100
        ) / 100
      );
    },
    //完成订单量百分比
    percent3: function() {
      if (this.listData.targetAmount == 0) {
        return 0;
      }
      return (
        Math.floor(
          (this.listData.doneAmount / this.listData.targetAmount) * 100 * 100
        ) / 100
      );
    },
    //完成订单量数
    percent33: function() {
      if (this.listData.doneOrderNumber == 0) {
        return 0;
      }
      return (
        Math.floor(
          (this.listData.doneOrderNumber / this.listData.orderNumber) *
            100 *
            100
        ) / 100
      );
    },
    // 已获得奖励
    total: function() {
      if (this.listData.orderType == 1) {
        if (
          this.listData.doneOrderNumber > this.listData.orderNumber ||
          this.listData.doneOrderNumber == this.listData.orderNumber
        ) {
          return (
            (this.listData.doneNumber > this.listData.targetNumber
              ? this.listData.doneNumber * this.listData.completeMember
              : this.listData.doneNumber * this.listData.unfinishedMember) +
            this.listData.doneOrderNumber * this.listData.orderMember
          );
        } else {
          return this.listData.doneNumber > this.listData.targetNumber
            ? this.listData.doneNumber * this.listData.completeMember
            : this.listData.doneNumber * this.listData.unfinishedMember;
        }
      }
      if (this.listData.orderType == 2) {
        if (
          this.listData.doneNumber > this.listData.targetNumber ||
          this.listData.doneNumber == this.listData.targetNumber
        ) {
          if (this.listData.doneAmount > this.listData.targetAmount) {
            return (
              this.listData.doneNumber * this.listData.completeMember +
              this.listData.doneAmount *
                this.listData.orderMember.toString().substring(0, 4)
            );
          } else {
            return this.listData.doneNumber * this.listData.completeMember;
          }
        } else {
          if (this.listData.doneAmount > this.listData.targetAmount) {
            return (
              this.listData.doneNumber * this.listData.unfinishedMember +
              this.listData.doneAmount *
                this.listData.orderMember.toString().substring(0, 4)
            );
          } else {
            return this.listData.doneNumber * this.listData.unfinishedMember;
          }
        }
      }
    }
  },
  created() {
    this.token = this.$route.query.token;
    if (this.token) {
      sessionStorage.setItem("token", this.token);
      AxiosIns.defaults.params.token = this.token;
    }
    this._setToken();
    this._getPersonalInfo();
    this._add_time();
  },
  methods: {
    // 拉新弹框
    showToast() {
      this.ishowToast = true;
    },
    //订单弹框
    showToast2() {
      this.ishowToast2 = true;
    },
    _setToken() {
      let token = this.$route.query.token;
      let iosToken = this.$route.query.iosToken;
      if (token) {
        sessionStorage.setItem("android", this.android);
        AxiosIns.defaults.params.token = token;
      }
      if (iosToken) {
        sessionStorage.setItem("token", this.iosToken);
        AxiosIns.defaults.params.token = iosToken;
      }     
    },
    //获取用户个人信息
    _getPersonalInfo() {
      getPersonalInfo().then(res => {
        this.userInfo = res.data.userInfo;
        this.name = this.userInfo.name;
        this.id = this.userInfo.id;
        this.wechat();
      });
    },
    // 获取列表数据
    _getAchievements() {
      var data = {
        targetId: this.targetId
      };
      getAchievements(data).then(res => {
        if (res.data.errCode == 10001) {
          this.token
            ? window.android.logout()
            : this.$router.push({ path: "/login" });
          return false;
        } else {
          this.listData = res.data;
          localStorage.setItem("listData", JSON.stringify(this.listData));
          this.progress2 =
            this.listData.targetNumber == 0
              ? (this.progress2 = 0)
              : (this.listData.doneNumber / this.listData.targetNumber) * 100 >
                100
              ? 100
              : (this.listData.doneNumber / this.listData.targetNumber) * 100;
          this.orderType1 =
            this.listData.doneOrderNumber == 0
              ? (this.orderType1 = 0)
              : (this.listData.doneOrderNumber / this.listData.orderNumber) *
                  100 >
                100
              ? 100
              : (this.listData.doneOrderNumber / this.listData.orderNumber) *
                100;
          this.orderType2 =
            this.listData.targetAmount == 0
              ? (this.orderType2 = 0)
              : (this.listData.doneAmount / this.listData.targetAmount) * 100 >
                100
              ? 100
              : (this.listData.doneAmount / this.listData.targetAmount) * 100;
        }
      });
    },
    //获取时间
    _add_time() {
      getTargetList().then(res => {
        this.targetList = res.data.targetList;
        this.targetList.forEach((item, index) => {
          var time = item.startTime + "至" + item.endTime;
          this.List_time.push(time);
          if (index == 0) {
            this.last_startTime = item.startTime;
            var array = [];
            var str = item.startTime + "至" + item.endTime;
            array.push(str);
            this.value = array;
            this.targetId = item.targetId;
          }
        });
      });
    },
    wechat() {
      var url = window.location.href;
      axios.post("/recommend/getPriceAgreement?url=" + url).then(res => {
        let links = "http://staff.ihotelvip.com/my/QrCode?id=" + this.id; //分享出去的链接
        let title = "送你一个住酒店福利，限前1000位领取。"; //分享的标题
        let desc = `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`; //分享的详情介绍
        wx.config({
          debug: false,
          appId: "wx9a16008c72a9cf50",
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.qm,
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo"
          ]
        });
        //直接调用
        wx.ready(function() {
          //分享给好友
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
              //logUtil.printLog("分享给朋友成功返回的信息为:",res);
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
        });
        //失败回调
        wx.error(function(res) {});
      });
    },
    onItemClick(value, disabled) {
      let token = this.$route.query.token;
      let iosToken = this.$route.query.iosToken;
      if (token) {
        //调用安卓方法分享
        window.android.shareWX(
          "送你一个住酒店福利，限前1000位领取。",
          "http://staff.ihotelvip.com/my/QrCode?id=" + this.id,
          `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`
        );
        return false;
      } else if (iosToken) {
        //调用ios方法分享
        sharedAction(
          "送你一个住酒店福利，限前1000位领取。",
          "http://staff.ihotelvip.com/my/QrCode?id=" + this.id,
          `邀请您成为长沙兴威华天大酒店会员，自己住店立减60元！推荐朋友入住最高可得50元！`
        );
        return false;
      } else {
        this.showDialogStyle = true;
      }
    },
    back() {
      let token = this.$route.query.token;
      let iosToken = this.$route.query.iosToken;
      if (token) {
        window.android.goBack();
      } else if (iosToken) {
        returnAction();
      } else {
        this.$router.go(-1);
      }
    },
    see_details() {
      localStorage.setItem("newName", this.value);
      this.$router.push("/my/PersonalDetails");
    }
  }
};
</script>
<style lang="less">
#Personal {
  width: 100%;
  height: 700px;
  background-image: linear-gradient(top, #8239d0, #d275f4);
  .header {
    background: none;
    color: #fff;
  }
  .personal {
    width: 94%;
    margin: 0 auto;
    position: relative;
    .vux-cell-box {
      margin-bottom: 15px;
      .vux-popup-picker-select {
        text-align: left !important;
        color: #fff;
      }
    }
    .img {
      width: 0.42rem;
      height: 0.44rem;
      position: absolute;
      top: 0;
      right: 0;
    }
    .month {
      width: 100%;
      display: flex;
      li {
        float: left;
        background: #ddd;
        color: #fff;
        flex: 1;
        margin-right: 0.1rem;
        text-align: center;
      }
    }
    .personal_conten {
      height: 106px;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 30px;
      .personal_conten_top {
        overflow: hidden;
        margin: 0;
        height: 30px;
        line-height: 30px;
        background: #ededed;
        border-radius: 8px 8px 0 0;
        padding: 0 10px;
        p {
          float: left;
          height: 20px;
          color: #5e5e5e;
        }
        .tis {
          background: url(../../assets/tis.png) no-repeat;
          background-size: 100%;
          width: 0.34rem;
          height: 0.34rem;
          margin-top: 0.11rem;
          margin-left: 0.1rem;
        }
        .detailed {
          float: right;
        }
      }
      & .percentage {
        float: right !important;
        span {
          width: 50px;
          color: red;
        }
      }
      .Personal_conten_table {
        .tr_bottom {
          line-height: 25px;
          color: #ababab;
          td {
            p {
              text-align: left;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .personal_conten_last {
      .Personal_conten_table {
        margin-top: 20px;
      }
    }
    .personal_conten2 {
      margin-bottom: 15px;
      .vux-table {
        border-radius: 8px;
      }
    }
    .personal_bottom {
      border-radius: 8px;
      overflow: hidden;
      p {
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #ededed;
      }
      span {
        padding: 10px 13px;
        display: inline-block;
        background: #fff;
        color: #ababab;
      }
    }
    .personal_foot {
      margin-top: 0.3rem;
      .personal_foot_top {
        overflow: hidden;
        p {
          width: 50%;
          float: left;
        }
      }
      ul {
        background: #fff;
      }
    }
  }
}
.vux-table {
  line-height: 34px !important;
}
.weui-cell {
  padding: 0 !important;
}
.weui-cell_access .weui-cell__ft {
  display: none;
}
.vux-cell-box:not(:first-child):before {
  border-top: none;
}
.vux-popup-picker-value {
  color: #fff;
}
.vux-table td:before,
.vux-table th:before {
  border: none;
  position: fixed !important;
}
.vux-table:after {
  border-top: none !important;
}
.weui-progress__inner-bar {
  background: #ff7f92 !important;
}
.v-transfer-dom {
  .content {
    font-size: 0.3rem;
    p {
      margin-bottom: 0.25rem;
    }
    .tishi {
      width: 100%;
      overflow: hidden;
      img {
        float: right;
        margin-right: 0.5rem;
      }
    }
  }
}
</style>
